@import "variables"


.navbar-container
    background-image: url(../image/banner.png), linear-gradient(90deg, #FFF6E6 0%, #FEF6E7 100%)
    background-position: bottom right
    background-size: auto 100%
    background-repeat: no-repeat
    box-shadow: 3px 4px 8px 4px rgba(92,92,92,0.08)
    display: flex
    flex-direction: row !important
    flex-wrap: wrap!important
    position: sticky
    top: 0
    z-index: 1000
    
    .nav-head
        padding-top: 0.75rem
        padding-bottom: 1.125rem
        margin-left: 2rem
        margin-right: 2rem

    .navbar-title
        @include large-title
        line-height: 1.875rem
        letter-spacing: 0

    .nav-head + .navbar-tab
        margin-left: 2.25rem


.navbar-tab
    display: flex


.navbar-ul
    flex-direction: row !important
    display: flex
    list-style: none
    margin-bottom: 0
    
    li + li
        margin-left: 6.25rem

    .navbar-item
        @include mid-title-regular
        display: flex
        align-items: center
        position: relative

        .navbar-item-bottom
            content: " "
            position: absolute
            width: 0
            height: 0.25rem
            background-color: $bg-red-light
            border-radius: 50vh
            transform: translateX(-50%)
            left: 50%
            bottom: 0.125rem

        /* vertical active sign under tabs */
        &.active, 
        &:hover
            .navbar-item-bottom
                width: 100%
                transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1)

        &.active
            @include mid-title-semibold

    &-link
        /* font-family: PingFangSC-Semibold */
        font-size: 1rem
